<template>
  <div>
    <div>
      <!-- 产品 -->
      <el-row>
        <el-col :span="11">
          <el-button type="primary" @click="test">测试数据</el-button>
        </el-col>
        <el-col :span="11" style="padding-left:500px">
          <el-button type="primary" @click="back">返回</el-button>
        </el-col>
      </el-row>

      <div class="context">
        <el-card shadow="hover" :data="data">
          <span>品牌资料</span>
          <el-row>
            <el-col :span="8" style=" margin-top: 32px;
          margin-left: 40px;">
              <!-- data.coverImage -->
              <el-image style=" width:100%; height: 90%"
                v-bind:src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'" />
            </el-col>
            <el-col :span="10" style="margin-top: 64px;
          margin-left: 40px;">
              <span>名称:{{ data.productName }}</span><br /><br />
              <span>价格:{{ data.price }}</span><br /><br />
              <span>产品编码:{{ data.productNumber }}</span><br /><br />
              <span>产品型号:{{ data.model}}</span><br /><br />
              <span>产品图号:{{ data.factoryDrawingNumber }}</span>
              <el-button style="margin-left:100% ; padding: 20px;" type="primary" :icon="Edit" title="产品询价"
                @click="Inquiry(data)">产品询价</el-button>
            </el-col>
          </el-row>
          <template #footer>额外的展示</template>
        </el-card>
      </div>
      <!-- 品牌 -->
      <div class="context">
        <el-card shadow="hover">
          <span>品牌资料</span><br /><br />
          <span>{{ data.brandInfo }}</span>
          <!-- 品牌资料内容区 -->
        </el-card>
      </div>
      <!-- 详情 -->
      <div class="context">
        <el-card shadow="hover">
          <span>产品详情</span><br /><br /><br />
          <span>{{ data.productDetails }}</span>
          <!-- 产品详情内容区 -->
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Edit } from "@element-plus/icons-vue";
//接收路由数据
const route = useRoute();
//路由跳转
const router = useRouter();

//接收路由数据
const data = ref()
//获得传递过来的数据
data.value = route.query

//测试按钮
function test() {
  //测试成功,有值
  console.log(route.params)
  console.log(route.query)
}

//死值
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

//点击询价事件
function Inquiry(data) {
  console.log(data)
  router.push({ name:"InquiryAdd" , query:data});

}


//返回按钮
function back(){
  router.push({ name:"productManagement"})
}


</script>

<style scoped>
.el-card{
max-width: 100%;
}
.context{
border: 2px solid wheat;
  margin: 4% 12%;
}
.span{
margin-left: 40px;
  font-size: 20px;
}
.el-col {
  margin: 5px;
}

.el-row {
  margin: 3px 0;
}
</style>
